<template>
  <el-dialog :model-value="true" title="课程纠错" width="80%" :close-on-click-modal="false" :before-close="handleClose">
    <el-form ref="myForm" :model="formData" label-width="100px">
      <el-row>
        <el-col :md="12" :sm="24">
          <el-form-item label="课程名称">
            {{ formData.course_name }}
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="章节名称">
            {{ formData.chapter_name }}
          </el-form-item>
        </el-col>
        <el-col :md="24">
          <el-form-item label="问题描述" prop="paid_type">
            {{ formData.description }}
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="审核结果" prop="status">
            <el-select v-model="formData.status">
              <el-option value="0" label="已处理"></el-option>
              <el-option value="8" label="不通过"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="24">
          <el-form-item label="审核意见" prop="description">
            <el-input type="textarea" v-model="formData.opinion" maxlength="256" :rows="5" resize="none" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-button type="warning" @click="handleClose">取消</el-button>
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" @click.prevent="handleUpdate(myForm)" native-type="submit">提交</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, reactive, ref, defineEmits, watch } from "vue";
import { FormInstance } from "element-plus";
import request from "@/utils/request";

const props = defineProps({
  // 行数据
  rowData: {
    type: Object,
    required: true,
  }
});

// 记录是否修改了数据
let updateData = false;

// 定义事件触发器
const emits = defineEmits(["close"]);

// 接收表单参数
const formData = reactive({
  name: "",
  cover: "",
  price: 0,
  paid_type: "0",
  lecturer: "",
  category: "",
  description: "",
  status: "0"
});

const myForm = ref<FormInstance>();

const handleClose = () => {
  emits("close", updateData);
  updateData = false;
};

const handleReset = () => {
  // 重置表单
  Object.assign(formData, props.rowData);
}

const handleUpdate = (myForm: FormInstance) => {
  myForm.validate((valid) => {
    // 校验失败
    if (!valid) {
      return;
    }

    // 发起请求
    request({
      data: formData,
      method: "POST",
      url: "/course/updateCorrecting"
    }).then(res => {
      if (res.data.code > 0) {
        updateData = true;
        alert("修改成功");
        handleClose();
      } else {
        alert("修改失败");
      }
    }, () => {
      alert("修改失败");
    })
  });
}

// 侦听父传子的参数变化
watch(() => props.rowData, (newVal) => {
  if (!newVal) {
    return;
  }
  // 将newVal的值合并到formData中，然后组件便根据formData填充值
  Object.assign(formData, newVal);
  // 默认为处理完成
  if (!formData.status || formData.status == '1') {
    formData.status = "0";
  }
}, { immediate: true })
</script>

<style scoped lang="scss"></style>